import React from 'react';
import { connect } from 'dva';
import { WingBlank, WhiteSpace, Card, Flex, Badge } from 'antd-mobile';
import styles from './styles.less';

const renderTitle = (props) => {
  if (props.isGood == 1) {
    return [
      props.name,
      <Badge
        key="badge"
        text="适宜"
        extra={null} />
    ];
  } else if (props.isGood == -1) {
    return [
      props.name,
      <Badge
        key="badge"
        text="不适宜"
        extra={null} />
    ];
  } else {
    return [
      props.name,
      <Badge
        key="badge"
        text=""
        extra={null} />
    ];
  }
};

const FoodDetailPage = ({ detail }) => {
  return detail ? (
    <WingBlank size="md">
      <WhiteSpace size="md" />
      <Card className="food">
        <Card.Header title={renderTitle(detail)} />
        <Card.Body>
          <Flex justify="center">
            <img src={detail.imageUrl || 'http://placehold.it/300x120?text=Photo'} height="228" width="228" />
          </Flex>
          <WhiteSpace size="lg" />
          <p>【食材别名】</p>
          <WhiteSpace size="sm" />
          <p>{detail.otherName}</p>
          <WhiteSpace size="lg" />
          <p>【性味与功效】</p>
          <WhiteSpace size="sm" />
          <p>{detail.content1}</p>
          <WhiteSpace size="lg" />
          <p>【食材禁忌】</p>
          <WhiteSpace size="sm" />
          <p>{detail.content3}</p>
          <WhiteSpace size="lg" />
          <p>【小知识】</p>
          <WhiteSpace size="sm" />
          <p>{detail.content2}</p>
        </Card.Body>
      </Card>
      <WhiteSpace size="md" />
    </WingBlank>
  ) : null;
};

const mapStateToProps = ({ food: { detail } }) => ({
  detail,
});

export default connect(mapStateToProps)(FoodDetailPage);
